<%--
  Created by IntelliJ IDEA.
  User: 86139
  Date: 2023/9/8
  Time: 11:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <link rel="stylesheet" href="static/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="static/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <link rel="stylesheet" href="static/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <link rel="stylesheet" href="static/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="static/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="static/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="static/plugins/summernote/summernote-bs4.min.css">
    <script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js"></script>
    <script src="static/js/Core_values.js"></script>
    <style>
        {% comment %}element.style {
            height: 100%;
        }
        .content-header{
            padding: 0px;
            height: 10%;
        }
    </style>

</head>
<body class="hold-transition sidebar-mini layout-fixed" style="height: 100%">
<div class="wrapper" style="height: 100%">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>

            <div id="lwz">
                <el-button :plain="true" @click="clockIn" v-if="!isClockIn" style="border: red;color: mediumblue" type="primary">请打卡</el-button>
                <el-button :plain="true" v-else style="border: #00f169;color:#00f169;" @click="clockIn">已打卡</el-button>
                <el-button type="success" plain @click="update1()">销假</el-button>
                <el-button type="primary" plain @click="update2()">销差</el-button>
            </div>
            <script>
                new Vue({
                    el: "#lwz",
                    data: {
                        tableData: [
                            clockDate="",
                            mornSignIn="",
                            mornSignOut="",
                            afterSignIn="",
                            afterSignOut="",
                            userTel="",
                            clockRemark="",
                        ],
                        isClockIn: false,
                        userName:""
                    },
                    methods: {
                        update1(){
                            var v = this
                            $.ajax({
                                url:"../leave/updatestart/"+JSON.parse(localStorage.getItem("userName")),
                                type:"put",
                                success:function (res) {
                                    v.$message.success(res.message)
                                }
                            })
                        },
                        update2(){
                            var v = this
                            $.ajax({
                                url:"../trip/updatestart/"+JSON.parse(localStorage.getItem("userName")),
                                type:"put",
                                success:function (res) {
                                    v.$message.success(res.message)
                                }
                            })
                        },
                        // 签到签退
                        clockIn() {
                            var _this = this;

                            $.ajax({
                                url: "../attendance/clockIn",
                                type:"post",
                                dataType:"json",
                                contentType:"application/json",
                                data:{},
                                success:function (res) {
                                    if(res.status===200){
                                        _this.isClockIn = true;
                                        _this.$message({
                                            showClose: true,
                                            message: '恭喜你!'+res.message + "成功。",
                                            type: 'success'
                                        });
                                        // 一个小时后恢复按钮状态
                                        setTimeout(function() {
                                            _this.isClockIn = false;
                                        }, 3600000);
                                    }
                                    else{
                                        if (!_this.isClockIn && res.message == "已经打卡，请勿重复打卡！") {
                                            _this.isClockIn = true;
                                        }
                                        else {
                                            _this.$message({
                                                showClose: true,
                                                message: res.message,
                                                type: 'warning'
                                            });
                                        }
                                    }
                                }
                            })
                        }
                    },

                    mounted:function () {
                        this.clockIn()

                    }
                });
            </script>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto" id="btn">
            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-comments"></i>
                    <span class="badge badge-danger navbar-badge">3</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="media">
                            <img src="static/dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    Brad Diesel
                                    <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">Call me whenever you can...</p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="media">
                            <img src="static/dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    John Pierce
                                    <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">I got your message bro</p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="media">
                            <img src="static/dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    Nora Silvester
                                    <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">The subject goes here</p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
                </div>
            </li>
            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-bell"></i>
                    <span class="badge badge-warning navbar-badge">15</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <span class="dropdown-item dropdown-header">15 Notifications</span>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-envelope mr-2"></i> 4 new messages
                        <span class="float-right text-muted text-sm">3 mins</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-users mr-2"></i> 8 friend requests
                        <span class="float-right text-muted text-sm">12 hours</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-file mr-2"></i> 3 new reports
                        <span class="float-right text-muted text-sm">2 days</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                    <i class="fas fa-expand-arrows-alt"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
                    <i class="fas fa-th-large"></i>
                </a>
            </li>
            <el-row>
                <el-button type="danger" @click="logout()">退出系统</el-button>
            </el-row>
        </ul>
    </nav>
    <script>
        new Vue({
            el:"#btn",
            methods:{
                logout(){
                    var v = this
                    $.ajax({
                        url:"../user/logout",
                        type:"get",
                        success:function (res) {
                            if (res.status===200){
                                v.$message.success(res.message)
                                setTimeout(function (){
                                    window.location.href="../login.jsp"
                                }, 1000);

                            }
                        }
                    })
                }
            }
        })
    </script>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="" class="brand-link">
            <img src="static/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
            <span class="brand-text font-weight-light">考勤管理系统</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <span class="info" style="color: mintcream">欢迎您 : </span>
                <div class="info" v-model="userName" id="app">
                    <a href="#" class="d-block">{{ userName }}</a>
                </div>

                <script>
                    var va = new Vue({
                        el:"#app",
                        data:{
                            userName:JSON.parse(localStorage.getItem("userName"))
                        }
                    });
                </script>
            </div>


            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul id="sider" class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->

<%--                    <li class="nav-item">--%>
<%--                        <a href="#" name="./home.jsp" class="nav-link active">--%>
<%--                            <i class="nav-icon far fa-image"></i>--%>
<%--                            <p>--%>
<%--                                首页--%>
<%--                            </p>--%>
<%--                        </a>--%>
<%--                    </li>--%>

<%--                    <li class="nav-item">--%>
<%--                        <a href="#" class="nav-link">--%>
<%--                            <i class="nav-icon fas fa-user"></i>--%>
<%--                            <p>--%>
<%--                                用户管理--%>
<%--                                <i class="right fas fa-angle-left"></i>--%>
<%--                            </p>--%>
<%--                        </a>--%>
<%--                        <ul class="nav nav-treeview">--%>
<%--                            <li class="nav-item">--%>
<%--                                <a href="#" name="./user.jsp" class="nav-link">--%>
<%--                                    <i class="far fa-circle nav-icon"></i>--%>
<%--                                    <p>用户列表</p>--%>
<%--                                </a>--%>
<%--                            </li>--%>
<%--                        </ul>--%>
<%--                    </li>--%>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>
    <div class="content-wrapper" style="height: 100%">
<%--        <div class="content-header">--%>
<%--            <div class="container-fluid" style="height: 100%">--%>
<%--                <div class="row mb-2">--%>
<%--                    <div class="col-sm-6">--%>
<%--                        <h1 class="m-0">Dashboard</h1>--%>
<%--                    </div><!-- /.col -->--%>
<%--                    <div class="col-sm-6">--%>
<%--                        <ol class="breadcrumb float-sm-right">--%>
<%--                            <li class="breadcrumb-item"><a href="#">Home</a></li>--%>
<%--                            <li class="breadcrumb-item active">Dashboard v1</li>--%>
<%--                        </ol>--%>
<%--                    </div><!-- /.col -->--%>
<%--                </div><!-- /.row -->--%>
<%--            </div><!-- /.container-fluid -->--%>
<%--        </div>--%>
        <section class="content" style="height:1000px">
            <div class="container-fluid" style="height: 100%">
                <iframe id="ifr" src="./home.jsp" frameborder="0" scrolling="no" width="100%" height="100%">

                </iframe>

            </div>
        </section>
    </div>
</div>
<!-- jQuery -->
<script src="static/plugins/jquery/jquery.min.js"></script>
<script src="static/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="static/js/vue.js"></script>


<script>
    new Vue({
        el:"#sider",
        data:{
            userName:"",
            menuLists:[],
        },
        methods:{
            //获取菜单
            menuList(){
                let _this=this
                $.ajax({
                    url:"/user/menuList/"+_this.userName,
                    type:"get",
                    dataType:"json",
                    success:function (res) {
                        // console.log(res)
                        var li = ""
                        for(let i=0;i < res.object.length;i++){
                            var j = 0;
                        li += '<li class="nav-item">'+
                                '<a href="#" class="nav-link" name="../jsp/menu'+i+'.jsp">'+
                                // '<i class="nav-icon fas fa-user"></i>'+
                                '<p>'+
                            res.object[i].premissionName+
                                '<i class="right fas fa-angle-left"></i>'+
                                '</p>'+
                                '</a>'
                            if (res.object[i].menuList.length > 0){
                                for (j;j < res.object[i].menuList.length ;j++)
                                li +='<ul class="nav nav-treeview">'+
                                    '<li class="nav-item">'+
                                    '<a href="#" class="nav-link" name="../jsp/menu'+i+''+j+'.jsp">'+
                                    '<i class="far fa-circle nav-icon"></i>'+
                                    '<p>'+res.object[i].menuList[j].premissionName+'</p>'+
                                    '</a>'+
                                    '</li>'+
                                    '</ul>'
                            }else {
                                li +='</li>'
                            }
                        }
                        $("#sider").html(li)
                    },

                    error:function () {
                        alert("服务器错误！")
                    }
                })
            },
        },
        mounted: function () {
            //获取服务器上的登录的用户的值
            this.userName = JSON.parse(localStorage.getItem("userName"))
            //调取菜单界列表
            this.menuList()
        }

    })

</script>


<script>
    $.widget.bridge('uibutton', $.ui.button)
</script>
<script src="static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="static/plugins/jquery-knob/jquery.knob.min.js"></script>
<script src="static/plugins/moment/moment.min.js"></script>
<script src="static/plugins/daterangepicker/daterangepicker.js"></script>
<script src="static/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="static/plugins/summernote/summernote-bs4.min.js"></script>
<script src="static/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script src="static/dist/js/adminlte.js"></script>
<script src="static/dist/js/demo.js"></script>

<script>
    $(document).ready(function () {
        $("#sider a").click(function () {
            $("a").removeClass("active");
            var a = $(this).closest(".menu-open").attr("class")
            var s = $(this).parent("li").parent("ul").attr("class");
            if(!(typeof (s)=="undefined"||s.search("nav-treeview")==(-1))){
                $(this).parent("li").parent("ul").prev().addClass("active");
                $(this).addClass("active");
                var url = $(this).attr("name");
                $("#ifr").attr("src",url);
            }else {
                if(a != undefined){
                    $(this).addClass("active");
                    return;
                }else {
                    $(".menu-open").children("a").trigger("click");
                    $("a").removeClass("active");
                    var url = $(this).attr("name");
                    $("#ifr").attr("src",url);
                }
                $(this).addClass("active");
            }
        });
    });
</script>
</body>
</html>
